<template>
  <el-dialog
    class="troila-dialog"
    :title="`${title}用户`"
    :visible.sync="dialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="500px"
  >
    <el-form
      class="troila-form"
      :label-width="formLabelWidth"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="登录名称" prop="loginName">
        <el-input
          v-model="form.loginName"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="form.userName"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio
            :label="item.dictCode"
            v-for="item in sexList"
            :key="item.dictCode"
            >{{ item.dictName }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱账号" prop="email">
        <el-input
          v-model="form.email"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="form.phone"
          auto-complete="off"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="选择角色" prop="roleId">
        <el-select
          v-model="form.roleId"
          multiple
          placeholder="请选择角色"
          popper-class="troila-popper"
        >
          <el-option
            :label="item.roleName"
            :value="item.id"
            v-for="(item, i) in dictionary.roleList"
            :key="i"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="用户状态"
        prop="status"
        v-if="value && value !== true"
      >
        <el-radio-group v-model="form.status">
          <el-radio
            :label="item.dictCode"
            v-for="item in userList"
            :key="item.dictCode"
            >{{ item.dictName }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{
        ajaxIng ? '关 闭' : '取 消'
      }}</el-button>
      <el-button type="primary" @click="submitForm('form')" :loading="ajaxIng"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'userForm',
  props: {
    value: {
      // true为新增，其他为编辑
      type: [Boolean, String, Number, Object],
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: this.value ? true : false, //弹窗显示
      ajaxIng: false,
      title: '',
      form: {
        loginName: '',
        userName: '',
        sex: '',
        email: '',
        phone: '',
        roleId: '',
        status: '',
      },
      formLabelWidth: '120px', //标题文字宽度
      rules: {
        // 规则
        loginName: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
        status: [
          { required: true, message: '请选择用户状态', trigger: 'change' },
        ],
      },
      dictionary: {
        // 字典信息
        // sex: [
        //   { dictName: '男', dictCode: '1' },
        //   { dictName: '女', dictCode: '0' },
        // ],
        // status: [
        //   { dictName: '启用', dictCode: '1' },
        //   { dictName: '停用', dictCode: '0' },
        // ],
        roleList: '',
      },
    }
  },
  computed: {
    sexList() {
      let list = this.$store.state.dictionary.user_sex
      if (!list) {
        this.$store.dispatch('dictionary/getDict', 'user_sex')
      }
      this.dictionary.sex = list
      return list ? list : []
    },
    userList() {
      let list = this.$store.state.dictionary.user_status
      if (!list) {
        this.$store.dispatch('dictionary/getDict', 'user_status')
      }
      this.dictionary.status = list
      return list ? list : []
    },
  },
  watch: {
    value(v) {
      // console.log(v)
      let show = v ? true : false
      this.dialogFormVisible !== show ? (this.dialogFormVisible = show) : null
      if (v) {
        this.title = v === true ? '新增' : '修改'
        this.$refs.form ? this.$refs.form.resetFields() : null
        // this.form.roleId = v.roles
        //   ? v.roles.map((v) => {
        //       return v.id
        //     })
        //   : this.form.roleId
        if (typeof v === 'object') {
          for (let k in this.form) {
            this.form[k] = v[k]
          }
          this.form.roleId = v.roles
            ? v.roles.map((v) => {
                return v.id
              })
            : null
          // console.log(this.form)
          this.filteIds()
          this.form.sex = this.form.sex.toString()
        } else {
          for (let k in this.form) {
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = '')
              : (this.form[k] = [])
          }
        }
        this.$nextTick(() => {
          this.$refs.form ? this.$refs.form.clearValidate() : null
        })
      }
    },
    dialogFormVisible(v) {
      v ? null : this.$emit('input', v)
    },
  },
  created() {
    // console.log(this.value)
    this.getDropList()
  },
  methods: {
    filteIds() {
      if (this.dictionary.roleList && this.dictionary.roleList.length > 0) {
        let list = this.dictionary.roleList.map((v) => v.id)
        // console.log(
        //   list,
        //   this.form.roleId,
        //   this.form.roleId.filter((v) => list.indexOf(v) > -1)
        // )
        this.form.roleId = this.form.roleId
          ? this.form.roleId.filter((v) => list.indexOf(v) > -1)
          : null
      }
    },
    getDropList() {
      this.API.roleManage.findList().then((res) => {
        if (res.code == '1') {
          // console.log(res.data)
          // if(res.data && res.data.length>0){
          //     res.data.map((item,index)=>{
          //         console.log(item,index)
          //     })
          // }
          this.dictionary.roleList = res.data
          this.filteIds()
        }
      })
    },
    submitForm(form) {
      if (this.ajaxIng) {
        return
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.ajaxIng = true
          //   alert('submit!')
          //   this.dialogFormVisible = false
          // this.form.roleId = this.form.roleId.join(',')

          //   this.$alertFn.success(`${this.title}成功 ！`)
          // this.$alertFn.error(`${this.title}失败 ！`)
          this.$emit('formConfirm', this.form)
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>